<template>
  <div class="app-container">
    <!--    头部-->
    <div class="my-detail-header">
      <div>
        <span style="
    font-size: x-large;
    margin-right: 5px;
    font-weight: bolder;
    vertical-align: middle;"
        >{{ form.reportQcName }}</span>
        <span style="color: #606266">{{ form.reportQcCode }}</span>
      </div>
      <el-descriptions :column="4">
        <el-descriptions-item label="创建人">{{ form.createBy }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ form.createTime }}</el-descriptions-item>
        <el-descriptions-item label="修改人">{{ form.updateBy }}</el-descriptions-item>
        <el-descriptions-item label="修改时间">{{ form.updateTime }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="my-detail-body">
      <el-tabs type="border-card">
        <el-tab-pane label="基础信息">
          <el-descriptions :column="2" :colon="false">
            <el-descriptions-item :span="2">
              <el-divider>
                <div class="my-divider">基础信息</div>
              </el-divider>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="检验单名称">
              {{ form.reportQcName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="检验单编号">
              {{ form.reportQcCode }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="检验类型">
              <dict-tag :options="getQualityType" :value="form.reportType" />
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="检验日期">
              {{ form.reportTime }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="检验人">
              {{ form.reportQcPeoName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="备注" :span="2">
              {{ form.reportDesc }}
            </el-descriptions-item>

            <el-descriptions-item :span="2">
              <el-divider>
                <div class="my-divider">任务信息</div>
              </el-divider>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="任务名称">
              {{ form.reportTCodeName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="任务编号">
              {{ form.reportTCode }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="生产车间">
              {{ form.createTime }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="工艺路线">
              {{ form.reportRouteName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="工序名称">
              {{ form.reportProcedureName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="工序编号">
              {{ form.reportProcedure }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="班组">
              {{ form.reportGroupName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="任务负责人" :span="2">
              {{ form.selectedOrderTask ? form.selectedOrderTask.wtaskManager : '' }}
            </el-descriptions-item>

            <el-descriptions-item :span="2">
              <el-divider>
                <div class="my-divider">报工信息</div>
              </el-divider>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="报工人员">
              {{ form.reportPeoName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="报工数量">
              {{ form.reportCompleteNum }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="报工时间" :span="2">
              {{ form.createTime }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="质检内容">
          <el-descriptions :colon="false" :column="2">
            <el-descriptions-item :span="2">
              <el-divider>
                <div class="my-divider">工单信息</div>
              </el-divider>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="工单名称">
              {{ form.reportOCodeName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="工单编号">
              {{ form.reportOCode }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="产品名称">
              {{ form.gbsGood ? form.gbsGood.pdName : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="产品编号">
              {{ form.reportPCode }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="规格型号">
              {{ form.gbsGood ? form.gbsGood.pdSpecType : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="产品类型">
              {{ form.gbsGood && form.gbsGood.gbsGoodClass ? form.gbsGood.gbsGoodClass.gcName : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="单位">
              {{ form.gbsGood && form.gbsGood.gbsGoodUnit ? form.gbsGood.gbsGoodUnit.guName : '' }}
            </el-descriptions-item>
            <!--            <el-descriptions-item :labelStyle="descLabelStyle" label="BOM">-->
            <!--              {{ form.createTime }}-->
            <!--            </el-descriptions-item>-->
            <el-descriptions-item :labelStyle="descLabelStyle" label="批次">
              {{ form.reportOBatch }}
            </el-descriptions-item>

            <el-descriptions-item :span="2">
              <el-divider>
                <div class="my-divider">检验项目</div>
              </el-divider>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <el-table :data="form.selectedProjectList ? form.selectedProjectList: []"
              >
                <el-table-column label="序号" type="index" align="center" />
                <el-table-column label="质检项目编码" align="center" prop="qualityCode" />
                <el-table-column label="项目名称" align="center" prop="qualityProjectName" />
                <el-table-column label="检验标准" align="center" prop="qualityProjectStandard" />
                <el-table-column label="项目最大值" align="center" prop="qualityProjectMax" />
                <el-table-column label="项目最小值" align="center" prop="qualityProjectMin" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      v-hasPermi="['qc:project:query']"
                      @click="lookDrawbackDialog(scope.$index)"
                    >查看缺陷
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-descriptions-item>

            <el-descriptions-item :span="2">
              <el-divider>
                <div class="my-divider">检验结果</div>
              </el-divider>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="合格数">
              {{ form.reportGood }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="不合格数">
              {{ form.reportQcNum - form.reportGood }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="合格率">
              {{ qualityRate }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="检验结果">
              <dict-tag :options="getQualityYesNo" :value="form.reportResult" />
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!--    查看缺陷-->
    <el-dialog title="选择缺陷" :visible.sync="projectDrawbackDialogVisible" width="50%" append-to-body>
      <el-table ref="projectDrawbackTable" :data="projectDrawbackList">
        <el-table-column label="缺陷编号" align="center" prop="drawbackCode" />
        <el-table-column label="缺陷名称" align="center" prop="drawbackName" />
        <el-table-column label="缺陷类型" align="center" prop="qcDrawbackType.drawbackTypeName" />
        <el-table-column label="缺陷状态" align="center" prop="drawbackStatus">
          <template slot-scope="scope">
            <dict-tag :options="getStatus" :value="scope.row.drawbackStatus" />
          </template>
        </el-table-column>
        <el-table-column label="缺陷描述" align="center" prop="drawbackDetail" />
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDrawback">关 闭</el-button>
      </div>
    </el-dialog>

    <!--    关闭按钮-->
    <MyConfirmBtnGroup :after-cancel-open-page="backPage" />
  </div>
</template>

<script>
import MyConfirmBtnGroup from '@/components/MyConfirmBtnGroup/index.vue'
import Decimal from 'decimal.js'
import { getProQualityByQcCode } from '@/api/yyj/qc/proQuality'

export default {
  name: 'WorkQualityDetail',
  components: { MyConfirmBtnGroup },
  dicts: ['qc_quality_type', 'yyj_common_status', 'qc_quality_yes_no'],
  data() {
    return {
      backPage: '/pro/workQuality',
      form: {},
      descLabelStyle: {
        minWidth: '120px !important'
      },
      projectDrawbackList: [],
      projectDrawbackDialogVisible: false
    }
  },
  computed: {
    getQualityType() {
      return this.dict.type.qc_quality_type
    },
    getStatus() {
      return this.dict.type.yyj_common_status
    },
    getQualityYesNo() {
      return this.dict.type.qc_quality_yes_no
    },
    qualityRate() {
      if (!this.form || !this.form.reportGood || !this.form.reportQcNum) {
        return ''
      }
      return new Decimal(this.form.reportGood).dividedBy(this.form.reportQcNum).mul(100).toFixed(2) + '%'
    }
  },
  created() {
    const reportQcCode = this.$route.params.reportQcCode
    this.getDetailInfo(reportQcCode)
  },
  methods: {
    lookDrawbackDialog(index) {
      this.projectDrawbackList = this.form.selectedProjectList[index].drawbackList
      this.projectDrawbackDialogVisible = true
    },
    closeDrawback() {
      this.projectDrawbackList = []
      this.projectDrawbackDialogVisible = false
    },
    // 获取此页面的详细信息
    async getDetailInfo(reportQcCode) {
      const res = await getProQualityByQcCode(reportQcCode)
      console.log(' res ', res)
      this.form = res.data
      this.form.selectedGood = res.selectedGood
      this.form.selectedOrderTask = res.selectedOrderTask
      this.form.selectedQcPeo = res.selectedQcPeo
      this.form.selectedProjectList = res.selectedProjectList
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/yyj/detail";
</style>
